@import "header.html"
<link rel="stylesheet" href="../css/pay_deposit.css">
<body>
<header class="fxj-header">
    <back></back>
    <h1 class="fxj-title">支付订金</h1>
</header>

<main id="main">
    <div class="title">付款详情</div>
    <div class="detail-container">
        <div class="line">
            <span>订单总金额</span>
            <span>￥{{orderDetail.pay_price}}</span>
        </div>
        <div class="line tips">
            <span>房租</span>
            <span>￥{{orderDetail.rent_price}}</span>
        </div>
        <div class="line tips">
            <span>住宿意外险</span>
            <span>￥{{Number(orderDetail.insurance_count) > 0?(Number(orderDetail.insurance_count)-1)*Number(orderDetail.day_total)*0.5:'0'}}</span>
        </div>
        <div class="line tips">
            <span>在线支付押金</span>
            <span v-cloak>￥{{orderDetail.deposit}}</span>
        </div>
        <div class="line margin-more" :class="{disable:!show.couponAble}" @click="showPopup('coupon')">
            <span>优惠券<span class="tips">(仅用于房租)</span></span>
            <span class="line" :class="{tip:show.couponText==='',highlight:show.couponText!==''}" v-cloak>
                {{orderDetail.coupon.length===0?"暂无优惠券":data.usedCoupon==='0'?`${orderDetail.coupon.length}张可用`:show.couponText}}
                <svg class="icon icon-you">
                    <use xlink:href="#icon-you"></use>
                </svg>
            </span>
        </div>
        <div class="line margin-more" :class="{disable:!show.creditsAble}">
            <span @click="showPopup('credits')">
                积分
                <span class="tips">(可用{{~~Number(orderDetail.usablepoint)}}积分抵扣{{orderDetail.usablepoint==='0'?'0':~~(Number(orderDetail.usablepoint)/100)}}元)</span>
                <svg class="icon">
                    <use xlink:href="#icon-guanyuwomen-copy"></use>
                </svg>
            </span>
            <div id="paySwitch" class="mui-switch mui-switch-mini">
                <div class="mui-switch-handle"></div>
            </div>
        </div>
        <div class="line">
            <span>应付总金额</span>
            <span class="highlight">￥{{data.total}}</span>
        </div>
    </div>

    <div class="title">付款方式</div>
    <div class="pay-container">
        <div class="line" @click="setPayWay('2')">
            <span>
                 <svg class="icon">
                    <use xlink:href="#icon-zhifubao"></use>
                </svg>
                <span>支付宝</span>
                <span class="recommend">推荐</span>
            </span>
            <svg class="icon" :class="{selected:data.payWay==='2'}">
                <use xlink:href="#icon-checkbox1" v-show="data.payWay==='2'"></use>
                <use xlink:href="#icon-checkbox" v-show="data.payWay==='1'"></use>
            </svg>
        </div>
        <div class="line" @click="setPayWay('1')">
            <span>
                <svg class="icon" :class="{selected:data.payWay==='1'}">
                    <use xlink:href="#icon-weixinzhifu"></use>
                </svg>
                <span>微信支付</span>
            </span>
            <svg class="icon" :class="{selected:data.payWay==='1'}">
                <use xlink:href="#icon-checkbox" v-show="data.payWay==='2'"></use>
                <use xlink:href="#icon-checkbox1" v-show="data.payWay==='1'"></use>
            </svg>
        </div>
    </div>

    <div class="affirm-pay" @click="nowPay">确认支付￥{{data.total}}</div>

    <section id="popup" v-show="show.coupon||show.credits" v-cloak>
        <div v-show="show.coupon" id="container-优惠券" class="container">
            <div class="content">
                <div class="title">优惠券</div>
                <ul>
                    <li class="line line-transverse" @click="selectedCoupon('0')">
                        <span>不使用优惠券</span>
                        <svg class="icon" :class="{selected:data.usedCoupon==='0'}">
                            <use xlink:href="#icon-checkbox" v-show="data.usedCoupon!=='0'"></use>
                            <use xlink:href="#icon-checkbox1" v-show="data.usedCoupon==='0'"></use>
                        </svg>
                    </li>
                    <li class="line line-transverse" v-for="coupon of orderDetail.coupon"
                        @click="selectedCoupon(coupon)">
                        <span>满{{coupon.condition}}减{{coupon.amount}}元</span>
                        <svg class="icon" :class="{selected:data.usedCoupon===coupon.ucid}">
                            <use xlink:href="#icon-checkbox" v-show="data.usedCoupon!==coupon.ucid"></use>
                            <use xlink:href="#icon-checkbox1" v-show="data.usedCoupon===coupon.ucid"></use>
                        </svg>
                    </li>
                </ul>
                <p>优惠券仅用于房租抵扣，单笔订单只能使用1个优惠券，使用之后不退换。</p>
            </div>
            <div class="btn" @click="closePopup">确定</div>
        </div>
        <div v-show="show.credits" id="container-积分" class="container">
            <div class="content">
                <div class="title">积分使用规则</div>
                <div>使用范围</div>
                <p>在分享家短租平台预定房间在线支付订金</p>
                <div>使用条件</div>
                <ul>
                    <li>1.订单金额大于10元（含）；</li>
                    <li>2.积分大于100（含）；</li>
                    <li>3.积分抵扣不得超过每笔订单金额的50%；</li>
                    <li>4.100积分抵扣1元，只能使用积分整数倍。</li>
                </ul>
            </div>
            <div class="btn" @click="closePopup">我知道了</div>
        </div>
    </section>
</main>

@import "js.html"
<script src="../script/pay_deposit.js"></script>
</body>
@import "footer.html"